<template>
    <div class="shopcar-container">
        <div class="goods-list">

            <!--商品列表项区域-->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner" v-for="(item, i) in goodslist" :key="goodslist.id">
                        <mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
                        <img :src="item.img_url">
                        <div class="info">
                            <h1>{{item.title}}</h1>
                            <p class="subinfo">
                                <span class="price">¥{{item.sell_price}}</span>
                                <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                <!--如何从购物车中获取商品的数量-->
                                <!--1. 先创建空对象 循环购物车中的所有商品数据 吧当前循环这条商品的id 作为对象的属性名 count作为对象的属性值 这样 当把所有的商品循环一遍 就会得到一个对象-->
                                <a href="#" @click.prevent="remove(item.id, )">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!--结算区域-->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountedAmount.count}}</span> 件, 总价 <span class="red">¥{{$store.getters.getGoodsCountedAmount.amount}}</span></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>

        <p>{{ $store.getters.getGoodsSelected}}</p>

    </div>
</template>

<script>
    import numbox from '../subcomponents/shopcar_numbox.vue'

    import sg01 from '../../images/sg01.jpg'
    import sg03 from '../../images/sg03.jpg'
    import sg04 from '../../images/sg04.jpg'
    import sg05 from '../../images/sg05.jpg'

    export default {
        data(){
            return{
                goodslist: [
                        { id:87, title:'6324 孙笑川 nmslofficial 抽象 自闭宇宙 NMSL 手机壳 奥利给', add_time:'2019-1-25 14:34:23', zhaiyao:'6324 孙笑川 nmslofficial 抽象 自闭宇宙 NMSL 手机壳 奥利给', click:0, img_url:sg01, sell_price:19.8, market_price:25, stock_quantity:60},
                        { id:89, title:'【WV PROJECT】韩国官网代购 18春男女字母休闲裤', add_time:'2019-1-25 14:36:23', zhaiyao:'【WV PROJECT】韩国官网正品代购 18春男女字母休闲裤', click:55, img_url:sg03, sell_price:305, market_price:325, stock_quantity:12},
                        { id:90, title:'4色MOBIUSHOP韩国正品WV PROJECT 18冬拼色加绒连帽男女宽松卫衣', add_time:'2019-1-25 14:37:23', zhaiyao:'4色MOBIUSHOP韩国正品WV PROJECT 18冬拼色加绒连帽男女宽松卫衣', click:61, img_url:sg04, sell_price:252, market_price:282, stock_quantity:2},
                        { id:91, title:'18秋CLIF宽松男女款80%羊毛格纹针织衫', add_time:'2019-1-25 14:38:23', zhaiyao:'18秋CLIF宽松男女款80%羊毛格纹针织衫', click:2210, img_url:sg05, sell_price:518, market_price:599, stock_quantity:21},
                    ],
            }
        },
        created(){
            this.getGoodsList();
        },
        methods:{
            getGoodsList(){
                //获取store所有商品的id 然后拼接一个字符串 用逗号分隔
                var idArr = [];
                this.$store.state.car.forEach(item => idArr.push(item.id));
                if(idArr.length <= 0){
                //    购物车中没商品 直接返回 不需要请求数据接口
                    return;
                }
                this.$http.get('api/goods/getshiocarlist/' + idArr.join(",") ).then(result => {
                    if(result.body.status === 0){
                        this.goodslist = result.body.message;
                    }
                })
            },
            remove(id, index){
            //    点击删除 把商品中store中根据传递的ID删除 同时把当前组件中的goodslist中 对应要删除的商品 使用index删除
                this.goodslist.splice(index, 1);
                this.$store.commit('removeFormCar', id)
            },
            selectedChanged(id, val){
                // 每当点击开关 就把最新的状态同步到store中
                this.$store.commit('updateGoodsSelected', {id, selected: val})
            }
        },
        components:{
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .shopcar-container{
        background-color: #eee;
        overflow: hidden;
        .goods-list{
            .mui-card-content-inner{
                display: flex;
                align-items: center;
            }
            img{
                width: 60px;
                height: 60px;
                margin: auto 5px;
            }
            h1{
                font-size: 13px;
            }
            .info{
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                .subinfo{
                    display:flex;
                    justify-content:space-between;
                    .price{
                        color:red;
                        font-weight: bold;
                    }
                }
            }
        }
        .jiesuan{
            display: flex;
            justify-content: space-between;
            .red{
                color:red;
                font-weight: bold;
                font-size:16px;
            }
        }
    }
</style>